<template>
  <el-card class="menu-list" shadow="hover">
    <div class="head-container">
      <el-input
        v-model="categoryName"
        maxlength="200"
        placeholder="请输入目录名称"
        clearable
        size="small"
        prefix-icon="Search"
        style="margin-bottom: 20px"
      />
    </div>
    <div class="tree-container">
      <el-tree
        ref="deptTreeRef"
        :data="cateList"
        :props="{ label: 'categoryName', children: 'children' }"
        :expand-on-click-node="false"
        :highlight-current="true"
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        default-expand-all
      >
        <template #default="{ node, data }">
          <span class="cateName">
            <span v-if="isShowTooltip(data.categoryName)">{{
              data.categoryName
            }}</span>
            <el-tooltip v-else effect="dark" placement="top">
              <div class="cateName">{{ data.categoryName }}</div>

              <template #content>
                {{ data.categoryName }}
              </template>
            </el-tooltip>
          </span>
        </template>
      </el-tree>
    </div>
  </el-card>
</template>

<script setup>
import { getLength } from '@/utils'
const { proxy } = getCurrentInstance()
const emits = defineEmits(['getList', 'close'])

const props = defineProps({
  cateList: {
    type: Array,
    default: () => {
      return []
    },
  },
})

// 分类名称长度超过20个字节显示tooltip提示
const bitLength = 18
function isShowTooltip(categoryName) {
  return getLength(categoryName) < bitLength
}

const categoryName = ref('')

/** 根据名称筛选部门树 */
watch(categoryName, (val) => {
  proxy.$refs['deptTreeRef'].filter(val)
})

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true
  return data.categoryName.indexOf(value) !== -1
}

function nodeClick(node) {
  emits('nodeClick', node)
}
</script>

<style lang="scss" scoped>
.tree-container {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}
.cateName {
  max-width: 178px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.child {
  cursor: pointer;
  list-style: none;
}
.menu-list {
  height: calc(100vh - 140px);
}

@media (max-width: 1800px) {
  .menu-list {
    height: calc(100vh + 5px);
  }
}
.nav {
  display: inline-block;
  span {
    width: 100%;
    display: inline-block;
    padding: 5px 0;
  }

  > .child {
    width: 120px;
    > span {
      padding-left: 10px;
    }
  }
  .child {
    position: relative;
  }
  .child:hover > span {
    color: #409eff;
    background: #ecf5ff;
  }
  .child:hover .subNav {
    display: block;
  }
  .child .subNav {
    .child span {
      padding-left: 20px;
    }
  }
}
.subNav {
  display: none;
  width: 100%;
  position: absolute;
  z-index: 9;
  left: 120px;
  top: 0;
}
</style>
